<!--全国地图-->
<template>
  <div :style="{height:height,width:width}">
    <div style="width: 100%;height:28px;display: flex;justify-content: flex-end">
      <el-button v-show="!isChina" type="primary" size="mini" @click="backToChinaMap">返回全国地区</el-button>
    </div>
    <div :id="id" :ref="id" style="width: 100%;height:100%"/>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'
import axios from 'axios'

require('echarts/theme/macarons') // echarts theme

export default {
  name:"mapChart",
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'mapChart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    chartData: {
      type: Array,
      default: () => ([
        { name: '北京市', value: 7 * 1000 },
        { name: '天津市', value: 6 * 1000 },
        { name: '上海市', value: 10 * 1000 },
        { name: '重庆市', value: 20 * 1000 },
        { name: '河北省', value: 40 * 1000 },
        { name: '河南省', value: 80 * 1000 },
        { name: '云南省', value: 60 * 1000 },
        { name: '辽宁省', value: 3 * 1000 },
        { name: '黑龙江省', value: 6 * 1000 },
        { name: '湖南省', value: 9 * 1000 },
        { name: '安徽省', value: 6 * 1000 },
        { name: '山东省', value: 7 * 1000 },
        { name: '新疆维吾尔自治区', value: 5 * 1000 },
        { name: '江苏省', value: 6 * 1000 },
        { name: '浙江省', value: 4 * 1000 },
        { name: '江西省', value: 80 * 1000 },
        { name: '湖北省', value: 50 * 1000 },
        { name: '广西壮族自治区', value: 30 * 1000 },
        { name: '甘肃省', value: 20 * 1000 },
        { name: '山西省', value: 10 * 1000 },
        { name: '内蒙古自治区', value: 44 * 1000 },
        { name: '陕西省', value: 66 * 1000 },
        { name: '吉林省', value: 88 * 1000 },
        { name: '福建省', value: 22 * 1000 },
        { name: '贵州省', value: 11 * 1000 },
        { name: '广东省', value: 33 * 1000 },
        { name: '青海省', value: 15 * 1000 },
        { name: '西藏自治区', value: 18 * 1000 },
        { name: '四川省', value: 20 * 1000 },
        { name: '成都市', value: 70 * 1000 },
        { name: '宁夏回族自治区', value: 60 * 1000 },
        { name: '海南省', value: 100 * 1000 },
        { name: '台湾省', value: 60 * 1000 },
        { name: '香港特别行政区', value: 40 * 1000 },
        { name: '澳门特别行政区', value: 40 * 1000 }
      ])
    },
    color: {
      type: Array,
      default: () => ['#535353','#B8B5B5', '#ffea00', '#ff0600'],
      required: false
    },
    min: {
      type: Number,
      default: 0,
      required: false
    },
    max: {
      type: Number,
      default: 10000,
      required: false
    }
  },
  data() {
    return {
      chart: null,
      name: '',
      jsonData: '',
      //所有地区对应的json文件名称
      allAreaJsonMap: {
        'china': 'china',
        '安徽省': 'anhui',
        '澳门特别行政区': 'aomen',
        '北京市': 'beijing',
        '重庆市': 'chongqing',
        '福建省': 'fujian',
        '甘肃省': 'gansu',
        '广东省': 'guangdong',
        '广西壮族自治区': 'guangxi',
        '贵州省': 'guizhou',
        '海南省': 'hainan',
        '河北省': 'hebei',
        '黑龙江省': 'heilongjiang',
        '河南省': 'henan',
        '湖北省': 'hubei',
        '湖南省': 'hunan',
        '江苏省': 'jiangsu',
        '江西省': 'jiangxi',
        '吉林省': 'jilin',
        '辽宁省': 'liaoning',
        '内蒙古自治区': 'neimenggu',
        '宁夏回族自治区': 'ningxia',
        '青海省': 'qinghai',
        '山东省': 'shandong',
        '上海市': 'shanghai',
        '山西省': 'shanxi',
        '陕西省': 'shanxi1',
        '四川省': 'sichuan',
        '台湾省': 'taiwan',
        '天津市': 'tianjin',
        '香港特别行政区': 'xianggang',
        '新疆维吾尔自治区': 'xinjiang',
        '西藏自治区': 'xizang',
        '云南省': 'yunnan',
        '浙江省': 'zhejiang'
      },
      isChina: true,
      title: ''
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(this.jsonData, this.name, this.chart, this.allAreaJsonMap, val)
      }
    }
  },
  mounted() {

  },
  beforeDestroy() {
    this.destroy()
  },
  methods: {
    /**
     * 初始化图表
     */
    async initChart() {
      this.$nextTick(async() => {
        this.destroy()
        this.chart = echarts.init(this.$refs.mapChart, 'macarons')
        this.jsonData = await this.getGeoJson('china.json')
        this.name = 'china'
        this.setOptions(this.jsonData, this.name, this.chart, this.allAreaJsonMap, this.chartData)
      })
    },
    /**
     * 更新图表数据
     * @param areaGeoJson 全国地区数据
     * @param name 地图名称
     * @param chart 地图对象
     * @param allAreaJsonMap 所有地区对应的json文件名称
     * @param dataOption 统计数据
     */
    setOptions(areaGeoJson, name, chart, allAreaJsonMap, dataOption) {
      echarts.registerMap(name, areaGeoJson)
      if (name != 'china') {
        this.title = name
      } else {
        this.title = '全国地图'
      }
      let option = {
        title: {
          text: this.title,
          left: 'center'
        },
        //是否开启鼠标缩放和平移漫游
        roam: true,
        tooltip: {
          trigger: 'item',
          formatter: function(data) {
            if (!isNaN(data.value)) {
              return data.name + '：' + data.value
            } else {
              return data.name + '：无数据'
            }
          }
        },
        visualMap: {
          min: this.min,
          max: this.max,
          left: 26,
          bottom: 40,
          showLabel: !0,
          text: ['高', '低'],
          inRange: {
            color: this.color
          },
          textStyle: {
            color: '#737373'
          },
          show: !0
        },
        series: [
          {
            type: 'map',
            map: name,
            label: {
              show: false
            },
            data: dataOption,
            animationDuration: 1000
          }
        ]
      }
      chart.setOption(option)
      // 区域点击事件
      chart.off('click')
      chart.on('click', params => {
        let isProvice = false
        let clickRegion
        for (let index in allAreaJsonMap) {
          if (params.name == index) {
            isProvice = true
            clickRegion = allAreaJsonMap[index]
          }
        }
        // 渲染省份数据
        if (isProvice) {
          this.getGeoJson(clickRegion + '.json').then(regionGeoJson => {
            this.jsonData = regionGeoJson
            this.name = params.name
            this.setOptions(this.jsonData, this.name, chart, allAreaJsonMap, this.chartData)
            this.isChina = false
          }).catch(err => {
            this.setOptions(this.jsonData, 'china', chart, allAreaJsonMap, this.chartData)
          })
        }
      })
    },
    /**
     * 获取对应地区json文件
     * @param jsonName
     */
    async getGeoJson(jsonName) {
      return await axios.get('/static/echarts/json/' + jsonName)
          .then(response => {
            return response.data
          }).catch(error => {
            console.log(error)
          })
    },
    /**
     * 返回全国地区
     */
    backToChinaMap() {
      this.initChart()
      this.isChina = true
    },
    destroy() {
      if (this.chart) {
        this.chart.dispose()
        this.chart = null
      }
    }
  }
}
</script>



